<template>
	<view class="wrapper">
		<view class="title-line">
			<view class="avatar" @click="tapAvatar()">
          <image class="avatar-image" :src='avatarImg'></image>
			</view>
			<view class="user-info">
				<view class="nick-name-wrapper">
					<view class="nick-name">{{mineData.nickName}}</view>	
					<view class="flag">代理合伙人</view>
				</view>
				
				<view class="cantact">
					<view class="phone">手机：{{mineData.phone}}</view>
					<view class="user-id">ID：{{mineData.id}}复制</view>
				</view>
			</view>
		</view>
		
		<view class="vip-data">
			<view class="left-data">
				<view class="vip-days">
					<view class="vip-days-num">{{mineData.vipDays}}</view>
					<view class="vip-days-desc">
              <view>会员天数</view>
              <image style="height: 30rpx;width: 30rpx;margin-left: 10rpx;" src="/static/mineWenHao.png"></image>
          </view>

				</view>
				<view class="vip-split"></view>
				<view class="vip-dots">
					<view class="vip-dots-num">{{mineData.lostDots}}</view>
					<view class="vip-dots-desc">
              <view>剩余点数</view>
              <image style="height: 30rpx;width: 30rpx;margin-left: 10rpx;" src="/static/mineWenHao.png"></image>
          </view>
				</view>
			</view>
			<view class="vip-picture">
          <image class="vip-picture-img" src="/static/mineVipData.png"></image>
			</view>
		</view>

      <view class="vip-desc">
          <view class="vip-desc-left">
              正式会员
          </view>
          <view class="vip-desc-right">
              <view class="vip-desc-right-button">
                  点击升级会员
              </view>
          </view>
      </view>

      <view class="mine-option" v-for="(item,index) in mineOptionList" :key="index" @click="toPage(item)">
         <view class="mine-option-left">
             <view class="mine-option-icon">
                 <image class="mine-option-icon-img" :src="item.iconPath"></image>
             </view>
             <view class="mine-option-desc">
                 {{item.optDesc}}
             </view>
         </view>
          <view class="mine-option-right-button" v-if="item.rightType=='button'">
              复制链接
          </view>
          <view class="mine-option-right-icon" v-if="item.rightType=='icon'">
              <view class="mine-option-right-icon-desc" v-if="item.rightText">{{item.rightText}}</view>
              <image class="mine-option-right-icon-img" src="/static/mineOptionNext.png"></image>
          </view>
      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clientHeight:'',
				clientWidth:'',
				mineData:{},
				promotionCenterData:{},
				effectData:{},
				dataPanelData:{},
          mineOptionList:[
              {id:1,iconPath:'/static/mineOptionShare.png',optDesc:'邀请好友(+1人/次)',rightType:'button',rightText:''},
              {id:2,iconPath:'/static/mineOptionRobot.png',optDesc:'我的助理',rightType:'icon',rightText:''},
              {id:3,iconPath:'/static/mineOptionPromotion.png',optDesc:'推广中心',rightType:'icon',rightText:'',page:'/pages/promotion/promotion'},
              {id:4,iconPath:'/static/mineOptionPromotion.png',optDesc:'我的优惠券',rightType:'icon',rightText:''},
              {id:5,iconPath:'/static/mineOptionLink.png',optDesc:'PC端登录链接',rightType:'button',rightText:''},
              {id:6,iconPath:'/static/mineOptionVoice.png',optDesc:'选择音色',rightType:'icon',rightText:'Nova'},
              {id:7,iconPath:'/static/mineOptionContract.png',optDesc:'联系方式',rightType:'icon',rightText:''},
              {id:8,iconPath:'/static/mineOptionCooperation.png',optDesc:'商务合作',rightType:'icon',rightText:''},
              {id:9,iconPath:'/static/mineOptionCooperation.png',optDesc:'管理中心',rightType:'icon',rightText:''},
          ],
          avatarImg:'',
			}
		},
		onLoad() {
		  // 初始获取尺寸
		  this.updateWindowSize();
		  
		  // 监听窗口变化
		  uni.onWindowResize(() => {
		    this.updateWindowSize();
		  });
		},
		onShow() {
			this.mineData =	uni.getStorageSync('mineData');
      if (this.mineData.phone) {
          this.mineData.phone = this.mineData.phone.slice(0, 3) + '****' + this.mineData.phone.slice(-4);
      }
        if (this.mineData.id) {
            this.mineData.id = this.mineData.id.slice(0, 3) + '****' + this.mineData.id.substring(this.mineData.id.length - 7);
        }
        this.mineData.avatar=uni.getStorageSync('avatar');
			this.promotionCenterData =	uni.getStorageSync('promotionCenterData');
			this.effectData =	uni.getStorageSync('effectData');
			this.dataPanelData =	uni.getStorageSync('dataPanelData');
			
			console.log('我的页面数据：',this.mineData)
		},
		methods: {
        tapAvatar() {
            console.log('点击头像')
            uni.chooseImage({
                count: 1, // 最多选择数量
                sizeType: ['original'], // 压缩格式
                sourceType: ['album'], // 仅相册选择
                success: (res) => {
                    const tempFilePaths = res.tempFilePaths;
                    this.mineData.avatar = tempFilePaths[0];
                    this.avatarImg = tempFilePaths[0];
                    uni.removeStorageSync('mineData');
                    uni.setStorageSync('mineData', this.mineData);
                }
            });
        },
			updateWindowSize() {
			    const res = uni.getSystemInfoSync();
			    this.clientHeight = res.windowHeight + 'px';
			    this.clientWidth = res.windowWidth + 'px';
			},
        toPage(item) {
          console.log('toPage::::',item);
          if (item.page) {
              uni.navigateTo({
                  url: item.page
              });
          }
        },
		}
	}
</script>

<style scoped lang="scss">
.wrapper {
	/*height: v-bind(clientHeight);
	width: v-bind(clientWidth);*/
	background-color: #48436C;
    /*padding-bottom: calc(var(--window-bottom) + 90rpx);*/


    .title-line {
		margin: 0 auto;
		width: 92%;
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		.avatar {
			width: 82rpx;
			height: 82rpx;
			border: 5px solid #d4bc9f;
			border-radius: 10px;
			.avatar-image {
          border-radius: 0;
          width: 100%;
          height: 100%;
      }
		}
		.user-info {
			margin-left: 30rpx;
			display: inline-block;
			.nick-name-wrapper {
				display: flex;
				align-items: center;
				.nick-name {
					font-size: 18px;
					font-weight: 600;
					color: #EBC08D;
				}
				.flag {
					margin-left: 20rpx;
					border: 1px solid #EBC08D;
					padding: 0 5px;
					font-size: 25rpx;
					color: #EBC08D;
					border-radius: 30px;
					background: linear-gradient(
					    to right,        /* 渐变方向：向右（水平方向） */
					    rgba(235, 192, 141, 0) 0%,    /* 左侧完全透明 */
					    rgba(235, 192, 141, 0.5) 50%,                  /* 中间颜色（不透明） */
					    rgba(235, 192, 141, 0) 100%   /* 右侧完全透明 */
					  );
				}
			}
			.cantact {
				display: flex;
				font-size: 12px;
				color: #EBC08D;
				.user-id {
					margin-left: 30rpx;
				}
			}
		}
	}
	
	.vip-data {
      height: 150rpx;
      width: 92%;
      margin: 40rpx auto 0;
      background: #EBC08D;
      border-radius: 10px;
      display: flex;
      .left-data {
          color: #34345c;
          width: 60%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-left: 40rpx;
          .vip-days{
              display: block;
              .vip-days-num {
                  font-size: 50rpx;
                  font-weight: 600;
              }
              .vip-days-desc {
                  display: flex;
                  align-items: center;
                  font-size: 27rpx;
              }
          }
          .vip-split {
              width: 1px;
              height: 60rpx;
              background: #34345c;
          }
          .vip-dots {
              .vip-dots-num {
                  font-size: 50rpx;
                  font-weight: 600;
              }
              .vip-dots-desc {
                  display: flex;
                  align-items: center;
                  font-size: 27rpx;
              }
          }
      }
      .vip-picture {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 30rpx;
          width: 30%;
          .vip-picture-img {
              width: 120rpx;
              height: 120rpx;
          }

      }
	}

    .vip-desc {
        height: 130rpx;
        width: 92%;
        margin: 20rpx auto 0;
        background: #EBC08D;
        border-radius: 10px;
        display: flex;
        .vip-desc-left {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40rpx;
            font-weight: 600;
            color: #34345c;
        }
        .vip-desc-right {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .vip-desc-right-button {
                width: 55%;
                height: 50%;
                font-size: 27rpx;
                background: #D3302D;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 20px;
                color: #F1DED9;
            }
        }
    }

    .mine-option {
        height: 110rpx;
        width: 92%;
        margin: 20rpx auto 0;
        background: #373358;
        border-radius: 10px;
        display: flex;
        align-items: center;
        .mine-option-left {
            width: 70%;
            display: flex;
            align-items: center;
            .mine-option-icon {
                margin-left: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 55rpx;
                height: 55rpx;
                border-radius: 50%;
                background: #49416F;
                .mine-option-icon-img{
                    height: 40rpx;
                    width: 40rpx;
                }
            }
            .mine-option-desc {
                color: #F0D8C6;
                margin-left: 20rpx;
                font-size: 30rpx;
            }
        }
        .mine-option-right-button {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 55rpx;
            width: 155rpx;
            border: 1px solid #F0D8C6;
            border-radius: 20px;
            color: #756E97;
            font-size: 25rpx;
        }
        .mine-option-right-icon {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .mine-option-right-icon-desc {
                color: #756E97;
            }
            .mine-option-right-icon-img {
                height: 50rpx;
                width: 50rpx;
                margin-right: 50rpx;
            }
        }

    }
}
</style>
